<template>
  <!--  <div>
      <el-row>
        <el-col>
          <div id="sanchi" :style="{width: '100%', height: '400px'}"></div>
        </el-col>
      </el-row>
    </div>-->
  <div id="d3Chart" style="text-align: center;">
    <!--    <svg>
          &lt;!&ndash;    <g style="transform: translate(0, 10px)">
                <path :d="line" />
              </g>&ndash;&gt;
        </svg>-->
  </div>

</template>

<script>
  export default {
    data() {
      return {}
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        var data = [['低精蛋白锌胰岛素', '减少肝脏对胰岛素的清除', 0], ['低精蛋白锌胰岛素', '家族史或遗传倾向', 0], ['低精蛋白锌胰岛素', '尿白蛋白肌酐 （UACR）', 0], ['低精蛋白锌胰岛素', '神经系统并发症（糖尿病神经病变）', 3], ['低精蛋白锌胰岛素', '多囊卵巢综合征', 10], ['低精蛋白锌胰岛素', '糖尿乳酸性酸中毒', 0], ['低精蛋白锌胰岛素', '胰岛素短期强化治疗', 7], ['低精蛋白锌胰岛素', '心血管疾病风险因子', 1], ['低精蛋白锌胰岛素', '抑制胰高血糖素分泌', 0], ['低精蛋白锌胰岛素', 'GLP-1激动剂', 19], ['减少肝脏对胰岛素的清除', '低精蛋白锌胰岛素', 0], ['减少肝脏对胰岛素的清除', '家族史或遗传倾向', 0], ['减少肝脏对胰岛素的清除', '尿白蛋白肌酐 （UACR）', 11], ['减少肝脏对胰岛素的清除', '神经系统并发症（糖尿病神经病变）', 20], ['减少肝脏对胰岛素的清除', '多囊卵巢综合征', 0], ['减少肝脏对胰岛素的清除', '糖尿乳酸性酸中毒', 11], ['减少肝脏对胰岛素的清除', '胰岛素短期强化治疗', 0], ['减少肝脏对胰岛素的清除', '心血管疾病风险因子', 0], ['减少肝脏对胰岛素的清除', '抑制胰高血糖素分泌', 0], ['减少肝脏对胰岛素的清除', 'GLP-1激动剂', 0], ['家族史或遗传倾向', '低精蛋白锌胰岛素', 3], ['家族史或遗传倾向', '减少肝脏对胰岛素的清除', 0], ['家族史或遗传倾向', '尿白蛋白肌酐 （UACR）', 0], ['家族史或遗传倾向', '神经系统并发症（糖尿病神经病变）', 16], ['家族史或遗传倾向', '多囊卵巢综合征', 0], ['家族史或遗传倾向', '糖尿乳酸性酸中毒', 15], ['家族史或遗传倾向', '胰岛素短期强化治疗', 9], ['家族史或遗传倾向', '心血管疾病风险因子', 18], ['家族史或遗传倾向', '抑制胰高血糖素分泌', 15], ['家族史或遗传倾向', 'GLP-1激动剂', 4], ['尿白蛋白肌酐 （UACR）', '低精蛋白锌胰岛素', 0], ['尿白蛋白肌酐 （UACR）', '减少肝脏对胰岛素的清除', 5], ['尿白蛋白肌酐 （UACR）', '家族史或遗传倾向', 1], ['尿白蛋白肌酐 （UACR）', '神经系统并发症（糖尿病神经病变）', 0], ['尿白蛋白肌酐 （UACR）', '多囊卵巢综合征', 9], ['尿白蛋白肌酐 （UACR）', '糖尿乳酸性酸中毒', 0], ['尿白蛋白肌酐 （UACR）', '胰岛素短期强化治疗', 0], ['尿白蛋白肌酐 （UACR）', '心血管疾病风险因子', 0], ['尿白蛋白肌酐 （UACR）', '抑制胰高血糖素分泌', 15], ['尿白蛋白肌酐 （UACR）', 'GLP-1激动剂', 3], ['神经系统并发症（糖尿病神经病变）', '低精蛋白锌胰岛素', 9], ['神经系统并发症（糖尿病神经病变）', '减少肝脏对胰岛素的清除', 17], ['神经系统并发症（糖尿病神经病变）', '家族史或遗传倾向', 8], ['神经系统并发症（糖尿病神经病变）', '尿白蛋白肌酐 （UACR）', 0], ['神经系统并发症（糖尿病神经病变）', '多囊卵巢综合征', 4], ['神经系统并发症（糖尿病神经病变）', '糖尿乳酸性酸中毒', 0], ['神经系统并发症（糖尿病神经病变）', '胰岛素短期强化治疗', 5], ['神经系统并发症（糖尿病神经病变）', '心血管疾病风险因子', 20], ['神经系统并发症（糖尿病神经病变）', '抑制胰高血糖素分泌', 7], ['神经系统并发症（糖尿病神经病变）', 'GLP-1激动剂', 1], ['多囊卵巢综合征', '低精蛋白锌胰岛素', 12], ['多囊卵巢综合征', '减少肝脏对胰岛素的清除', 6], ['多囊卵巢综合征', '家族史或遗传倾向', 3], ['多囊卵巢综合征', '尿白蛋白肌酐 （UACR）', 5], ['多囊卵巢综合征', '神经系统并发症（糖尿病神经病变）', 0], ['多囊卵巢综合征', '糖尿乳酸性酸中毒', 0], ['多囊卵巢综合征', '胰岛素短期强化治疗', 0], ['多囊卵巢综合征', '心血管疾病风险因子', 0], ['多囊卵巢综合征', '抑制胰高血糖素分泌', 0], ['多囊卵巢综合征', 'GLP-1激动剂', 1], ['糖尿乳酸性酸中毒', '低精蛋白锌胰岛素', 16], ['糖尿乳酸性酸中毒', '减少肝脏对胰岛素的清除', 17], ['糖尿乳酸性酸中毒', '家族史或遗传倾向', 2], ['糖尿乳酸性酸中毒', '尿白蛋白肌酐 （UACR）', 11], ['糖尿乳酸性酸中毒', '神经系统并发症（糖尿病神经病变）', 0], ['糖尿乳酸性酸中毒', '多囊卵巢综合征', 0], ['糖尿乳酸性酸中毒', '胰岛素短期强化治疗', 1], ['糖尿乳酸性酸中毒', '心血管疾病风险因子', 5], ['糖尿乳酸性酸中毒', '抑制胰高血糖素分泌', 14], ['糖尿乳酸性酸中毒', 'GLP-1激动剂', 17], ['胰岛素短期强化治疗', '低精蛋白锌胰岛素', 17], ['胰岛素短期强化治疗', '减少肝脏对胰岛素的清除', 0], ['胰岛素短期强化治疗', '家族史或遗传倾向', 0], ['胰岛素短期强化治疗', '尿白蛋白肌酐 （UACR）', 0], ['胰岛素短期强化治疗', '神经系统并发症（糖尿病神经病变）', 14], ['胰岛素短期强化治疗', '多囊卵巢综合征', 17], ['胰岛素短期强化治疗', '糖尿乳酸性酸中毒', 11], ['胰岛素短期强化治疗', '心血管疾病风险因子', 11], ['胰岛素短期强化治疗', '抑制胰高血糖素分泌', 8], ['胰岛素短期强化治疗', 'GLP-1激动剂', 0], ['心血管疾病风险因子', '低精蛋白锌胰岛素', 0], ['心血管疾病风险因子', '减少肝脏对胰岛素的清除', 20], ['心血管疾病风险因子', '家族史或遗传倾向', 19], ['心血管疾病风险因子', '尿白蛋白肌酐 （UACR）', 18], ['心血管疾病风险因子', '神经系统并发症（糖尿病神经病变）', 0], ['心血管疾病风险因子', '多囊卵巢综合征', 0], ['心血管疾病风险因子', '糖尿乳酸性酸中毒', 5], ['心血管疾病风险因子', '胰岛素短期强化治疗', 0], ['心血管疾病风险因子', '抑制胰高血糖素分泌', 16], ['心血管疾病风险因子', 'GLP-1激动剂', 0], ['抑制胰高血糖素分泌', '低精蛋白锌胰岛素', 14], ['抑制胰高血糖素分泌', '减少肝脏对胰岛素的清除', 3], ['抑制胰高血糖素分泌', '家族史或遗传倾向', 19], ['抑制胰高血糖素分泌', '尿白蛋白肌酐 （UACR）', 8], ['抑制胰高血糖素分泌', '神经系统并发症（糖尿病神经病变）', 11], ['抑制胰高血糖素分泌', '多囊卵巢综合征', 0], ['抑制胰高血糖素分泌', '糖尿乳酸性酸中毒', 0], ['抑制胰高血糖素分泌', '胰岛素短期强化治疗', 20], ['抑制胰高血糖素分泌', '心血管疾病风险因子', 12], ['抑制胰高血糖素分泌', 'GLP-1激动剂', 19], ['GLP-1激动剂', '低精蛋白锌胰岛素', 14], ['GLP-1激动剂', '减少肝脏对胰岛素的清除', 9], ['GLP-1激动剂', '家族史或遗传倾向', 7], ['GLP-1激动剂', '尿白蛋白肌酐 （UACR）', 16], ['GLP-1激动剂', '神经系统并发症（糖尿病神经病变）', 0], ['GLP-1激动剂', '多囊卵巢综合征', 3], ['GLP-1激动剂', '糖尿乳酸性酸中毒', 8], ['GLP-1激动剂', '胰岛素短期强化治疗', 18], ['GLP-1激动剂', '心血管疾病风险因子', 0], ['GLP-1激动剂', '抑制胰高血糖素分泌', 14]];
        var colors = {
          '低精蛋白锌胰岛素':'#da4480',
          '减少肝脏对胰岛素的清除': '#5ab449',
          '家族史或遗传倾向': '#7f5acd',
          '尿白蛋白肌酐 （UACR）': '#aab740',
          '神经系统并发症（糖尿病神经病变）': '#ce58c0',
          '多囊卵巢综合征': '#50a26e',
          '糖尿乳酸性酸中毒': '#d1434b',
          '胰岛素短期强化治疗': '#45c0bc',
          '心血管疾病风险因子': '#ce5929',
          '抑制胰高血糖素分泌': '#4e7bda',
          'GLP-1激动剂': '#d49d3c',
        };
        var sortOrder = ['低精蛋白锌胰岛素', '减少肝脏对胰岛素的清除', '家族史或遗传倾向', '尿白蛋白肌酐 （UACR）', '神经系统并发症（糖尿病神经病变）', '多囊卵巢综合征', '糖尿乳酸性酸中毒', '胰岛素短期强化治疗', '心血管疾病风险因子', '抑制胰高血糖素分泌', 'GLP-1激动剂'];

        function sort(a, b) {
          return d3.ascending(sortOrder.indexOf(a), sortOrder.indexOf(b));
        }

        var ch = viz.ch().data(data)
          .padding(.01)
          .sort(sort)
          .innerRadius(210)
          .outerRadius(230)
          .duration(1000)
          .chordOpacity(0.3)
          .labelPadding(.03)
          .fill(function (d) {
            return colors[d];
          });


        var width = 1000, height = 600;
        var svg = d3.select("#d3Chart").append("svg").attr("height", height).attr("width", width);
        svg.append("g").attr("transform", "translate(500,300)").call(ch);
        d3.select(self.frameElement).style("height", height + "px").style("width", width + "px");

      }
    }
  }
</script>

<style scoped>

</style>
